<template>
	<el-card shadow="hover" class="mit-card">
		<template #header>
			<div class="card-header" style="display: flex">
				<div>
					<span>{{ title }}</span>
				</div>
				<div>
					<el-button class="button" @click="handleAddList">新增{{ title }}</el-button>
				</div>
			</div>
		</template>
		<div v-for="(item, index) in data" :key="index" class="text item">
			<div v-show="index > 0">
				<el-divider border-style="dashed" />
				<div class="close">
					<el-icon @click="handleDelete(index)">
						<Close />
					</el-icon>
				</div>
			</div>
			<el-form-item
				label="单位名称："
				:rules="{
					required: true,
					message: '单位名称不能为空！',
					trigger: 'blur'
				}"
				:prop="type + '.' + index + '.name'"
			>
				<el-input placeholder="请输入" v-model="item.name" type="text">
					<template #append>
						<el-icon @click="deleteName(index)">
							<Delete />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item
				:prop="type + '.' + index + '.logoUrl'"
				:rules="{
					required: true,
					message: '单位logo是必传项！',
					trigger: 'change'
				}"
				label="单位Logo："
			>
				<UploadImgVue :id="type + index" v-model:image-url="item.logoUrl">
					<template #tip>
						<div class="el-upload__tip">支持格式：.jpg .png，文件大小不能超过500kb，建议尺寸：375*80</div>
					</template>
				</UploadImgVue>
			</el-form-item>
			<el-form-item label="负责人：">
				<el-input placeholder="请输入" :maxlength="50" v-model="item.responsible" type="text" />
			</el-form-item>
			<el-form-item
				:prop="type + '.' + index + '.telePohone'"
				:rules="{
					required: false,
					pattern: /^(1[3-9]\d{9}|0[1-9]\d{1,2}-[2-8]\d{6,7}(-\d{1,4})?)$/,
					message: '电话号码格式不正确',
					trigger: 'blur'
				}"
				label="联系电话："
			>
				<el-input
					:maxlength="13"
					placeholder="请输入电话号码，座机请添加区号如：“010-xxxxxxxx”"
					v-model="item.telePohone"
					type="text"
				/>
			</el-form-item>
		</div>
	</el-card>
</template>
<script lang="ts" setup>
import UploadImgVue from "@/components/Upload/Img.vue";
interface Unit {
	name: string;
	logoUrl: string;
	responsible: string;
	telePohone: string;
}
interface List {
	data: Array<Unit>;
	title: string | "主办单位";
	type: string;
}
const props = defineProps<List>();
const handleDelete = (index: any) => {
	props.data.splice(index, 1);
};
const handleAddList = () => {
	props.data.push({
		name: "",
		logoUrl: "",
		responsible: "",
		telePohone: ""
	});
};
const deleteName = (index: number) => {
	props.data[index].name = "";
};
</script>
<style lang="scss">
.mit-card {
	margin: 30px 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
}
.close {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	transform: translateY(-100%);
}
</style>
